<template>
  <div class="productionDesign_box myStyle">
    <div id="tags-view-container" class="tags-view-container">
      <div class="tags-view-wrapper" v-if="query.title">
        <router-link ref="tag" tag="span" class="tags-view-item active" :to="{ path: '/' }">
          {{ query.title }}
          <span class="el-icon-close" @click="$router.push('/index')" />
        </router-link>
      </div>
    </div>
    <div class="content">
      <div class="content_top">
        <StrokeTitle2 :isCenter="true" title=" " class="float margin" style="width: 32.3%">
          <div class="flex_center" slot="select">
            <el-select v-model="isTop1Show" placeholder="请选择" style="width: 62px; margin-right: 2px" size="mini"
              @change="top1FormChange" class="noBackground">
              <el-option v-for="item in [
                  { value: true, label: '达成率' },
                  { value: false, label: '完成度' },
                ]" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <ElementRadio v-model="model" :isButton="true" @change="radioChange1" />
            <el-select v-model="top1Form.type" placeholder="请选择" style="width: 58px" size="mini"
              @change="top1FormChange">
              <el-option v-for="item in [
                  { value: '', label: '全部' },
                  { value: '1', label: '追加' },
                  { value: '0', label: '基本' },
                ]" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>

          <div class="flex_center Echarts" slot="content" v-if="!isTop1Show">
            <PieImg3 :data="top1a" :isLenged="false" itemWidth="0.9" :showTooltip="true" cirLeft="0.8" :showLabel="true"
              :img="require('@/assets/images/echarts/djdscwc.png')" :color="['#00ebcd', '#ff7474']"
              v-if="!isTop1Show" />
            <div style="width: 100%; height: 100%" class="flex_center" v-if="!isTop1Show">
              <div class="clzdjd_box">
                <div class="clzdjd_item flex_center" v-for="(item, index) in top1b" :key="index">
                  <!-- <div class="clzdjd_item_left flex_between">
                    <div class="bigCir flex_center" :style="{
                        border: '1px solid rgba(' + color[index] + ',0.4)',
                      }">
                      <div class="smallCir" :style="{
                          border: '1px solid rgba(' + color[index] + ',1)',
                        }"></div>
                      <div class="border" :style="{ background: 'rgba(' + color[index] + ',1)' }"></div>
                    </div>
                  </div> -->
                  <div class="clzdjd_item_right flex_center">
                    <div class="lt" :style="{ color: 'rgba(' + color[index] + ',1)' }">
                      {{ item.name }}
                    </div>
                    <div class="rt" :style="{ color: 'rgba(' + color[index] + ',1)' }" v-if="top1b[0].value != 0">
                      <div v-if="item.value / top1b[0].value <= 1">
                        {{ item.value }}箱<span :style="{
                            color: 'rgba(' + color[index] + ',1)!important',
                          }" v-show="index != 0">
                          /
                          {{
                          ((item.value / top1b[0].value) * 100).toFixed(1)
                          }}%</span>
                      </div>
                      <div v-if="item.value / top1b[0].value > 1">
                        {{ item.value }}箱<span :style="{
                            color: 'rgba(' + color[index] + ',1)!important',
                          }" v-show="index != 0">
                          / 100%</span>
                      </div>
                    </div>
                    <div class="rt" :style="{ color: 'rgba(' + color[index] + ',1)' }" v-else>
                      {{ item.value }}箱<span :style="{
                          color: 'rgba(' + color[index] + ',1)!important',
                        }" v-show="index != 0">
                        / 0%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="Echarts flex_center title_box_bc" slot="content" v-if="isTop1Show">
            <div class="calculagraph_left">
              <Ring style="width: 90px; height: 90px" :data="{ allRate: top1c.dcl }" subtext="" titleTop="42%" />
              <div class="label" style="margin-top: 1px">实际达成率</div>
            </div>
            <div class="calculagraph_right">
              <StrokeItem rightWidth="55%" leftWidth="45%" title="实际生产量" :number="top1c.sjscl"
                style="margin-bottom: 10px" />
              <StrokeItem rightWidth="55%" leftWidth="45%" title="基本计划生产量" :number="top1c.jhscl"
                style="margin-bottom: 10px" />
              <div class="label" style="margin-top: 1px; margin-bottom: 10px">
                单位：标准箱
              </div>
            </div>
          </div>
        </StrokeTitle2>

        <StrokeTitle2 :isCenter="true" title="分类统计" class="float margin" style="width: 32.4%">
          <div class="flex_center" slot="select">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange2" />
            <div class="all_box" style="margin-left: 0px" @click="productPlanCount3All">
              全部
            </div>
          </div>
          <div class="flex_center Echarts" slot="content">
            <XRow barWidth="6" :data="top3" barLeft="6%" barRight="22%"></XRow>
          </div>
        </StrokeTitle2>
        <StrokeTitle2 :isCenter="true" title=" " class="float margin" style="width: 32.3%">
          <div class="flex_center" slot="select">
            <el-select v-model="isTop2Show" placeholder="请选择" style="width: 62px; margin-right: 2px" size="mini"
              class="noBackground">
              <el-option v-for="item in [
                  { value: true, label: '来源分析' },
                  { value: false, label: '追加分布' },
                ]" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <ElementRadio v-if="!isTop2Show" v-model="model" :isButton="true" @change="radioChange2a($event, 3)" />
            <div class="all_box" v-if="!isTop2Show" style="margin-left: 0px" @click="productRecordDetailCount3All">
              全部
            </div>
          </div>

          <div class="flex_center Echarts" slot="content" v-if="isTop2Show">
            <TwoRow barWidth="6" style="height: 100%" :data="top2"></TwoRow>
          </div>
          <div class="flex_center Echarts" slot="content" v-if="!isTop2Show">
            <PieImg :data="top2a" legendLeft="29%" :legendLength="query.length" length="5" itemWidth="0.95"
              cirLeft="0.2" :img="require('@/assets/images/echarts/dzbccp2.png')" />
          </div>
        </StrokeTitle2>
      </div>
      <div class="content_center">
        <StrokeTitle2 :isCenter="true" title="全部计划" class="float margin" style="width: 32.3%">
          <div class="flex_center" slot="select">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange3" />
            <div class="all_box" style="margin-left: 0px" @click="productPlanCount4All">
              全部
            </div>
          </div>
          <div class="flex_center Echarts" slot="content">
            <PieImg :data="center1" legendLeft="20%" length="5" itemWidth="0.7" cirLeft="-0.05"
              :img="require('@/assets/images/echarts/djdscqb.png')" />
          </div>
        </StrokeTitle2>
        <StrokeTitle2 :isCenter="true" title="已完成占比" class="float margin" style="width: 32.3%">
          <div class="flex_center" slot="select">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange4" />
            <div class="all_box" style="margin-left: 0px" @click="productPlanCount40All">
              全部
            </div>
          </div>
          <div class="flex_center Echarts" slot="content">
            <PieImg legendLast="()" :data="center2" legendLeft="20%" length="5" itemWidth="0.7" cirLeft="-0.05"
              :img="require('@/assets/images/echarts/djdscwc.png')" />
          </div>
        </StrokeTitle2>
        <StrokeTitle2 :isCenter="true" title="未完成占比" class="float margin" style="width: 32.4%">
          <div class="flex_center" slot="select">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange5" />
            <div class="all_box" style="margin-left: 0px" @click="productPlanCount41All">
              全部
            </div>
          </div>
          <div class="flex_center Echarts" slot="content">
            <PieImg legendLast="()" :data="center3" legendLeft="20%" length="5" itemWidth="0.7" cirLeft="-0.05"
              :img="require('@/assets/images/echarts/djdscwwc.png')" />
          </div>
        </StrokeTitle2>
      </div>
      <div class="content_bottom">
        <StrokeTitle2 :isCenter="true" title="当年十二个月生产量统计" class="float margin" style="width: 99%">
          <span slot="select">累计生产量={{ bottomLabel }}标准箱</span>
          <div class="flex_center Echarts" slot="content">
            <MoreDirection4 :data="bottom" gridLeft="5%" gridRight="2%" :isUnit="false" :isCategory="false"
              :isMoretooltip="true" :yAxisLineShow="true" :xAxisLineShow="true" :legendData="['天数']" yUnit="天"
              barWidth="11" style="height: 95%; margin-top: 1%" />
          </div>
        </StrokeTitle2>
      </div>
    </div>
    <AllDialog ref="AllDialog" />
  </div>
</template>

<script>
  import {
    ProductRecordDetailCount3,
  } from "@/api/echarts/capacityDesign/index";
  import PieImg3 from "@/components/echarts/pie/img3.vue";
  import {
    ProductPlanCount1,
    ProductPlanCount2,
    ProductPlanCount3,
    ProductPlanCount4,
    ProductPlanCount5,
    ProductPlanCount6,
    ProductPlanCount7,
    ProductPlanCount1_1,
  } from "@/api/echarts/productionDesign/index";
  import StrokeTitle2 from "@/components/myComponents/stroke/title2.vue";
  import TwoRow from "@/components/echarts/bar/twoRow.vue";
  import MoreDirection4 from "@/components/echarts/bar/moreDirection4.vue";
  export default {
    components: {
      TwoRow,
      PieImg3,
      StrokeTitle2,
      MoreDirection4,
    },
    name: "ProductionDesign",
    data() {
      return {
        color: ["35, 195, 255", "0, 235, 205", "255, 116, 116"],
        model: "month",
        //计划完成度
        top1a: [],
        //计划完成度
        top1b: [],
        //实际达成率
        top1c: { sjscl: 0, jhscl: 0, dcl: 0 },
        //计划完成度
        top1Form: {
          pDateEnd: this.$getMonth("e"),
          pDateStart: this.$getMonth("s"),
          type: "",
        },
        //达成率是否显示
        isTop1Show: true,
        //来源分析是否显示
        isTop2Show: true,
        //来源分析
        top2: {},
        //追加分布
        top2a: [],
        top2aForm: {
          pDateEnd: this.$getMonth("e", 0),
          pDateStart: this.$getMonth("s", 0),
        },
        //分类统计
        top3: [],
        //分类统计
        top3Form: {
          pDateEnd: this.$getMonth("e"),
          pDateStart: this.$getMonth("s"),
        },
        //全部计划占比统计
        center1: [],
        center1Form: {
          pDateEnd: this.$getMonth("e"),
          pDateStart: this.$getMonth("s"),
        },
        //已完成计划占比统计
        center2: [],
        center2Form: {
          pDateEnd: this.$getMonth("e"),
          pDateStart: this.$getMonth("s"),
          status: "2",
        },
        //未完成计划占比统计
        center3: [],
        center3Form: {
          pDateEnd: this.$getMonth("e"),
          pDateStart: this.$getMonth("s"),
          status: "1",
        },
        //当年十二个月生产量统计
        bottom: [],
        bottomLabel: 0,
        //路由信息
        query: { length: 52, title: "" },
      };
    },
    activated() {
      this.productPlanCount1();
      this.productPlanCount2();
      this.productPlanCount3();
      this.productPlanCount4();
      this.productPlanCount40();
      this.productPlanCount41();
      this.productPlanCount5();
      this.productRecordDetailCount3()
      if (this.$route.query.length) {
        this.query = this.$route.query;
      } else {
        this.query = { length: 40, title: "" };
      }
    },
    methods: {
      //计划完成度
      productPlanCount1() {
        ProductPlanCount1(this.top1Form).then((res) => {
          if (res.code == 200) {
            this.top1a = JSON.parse(JSON.stringify(res.data));
            this.top1a = this.top1a.slice(1);
            this.top1b = JSON.parse(JSON.stringify(res.data));
          }
        });
        ProductPlanCount1_1(this.top1Form).then((res) => {
          if (res.code == 200) {
            this.top1c.jhscl = res.data[0].value;
            this.top1c.sjscl = res.data[1].value;
            if (this.top1c.jhscl == 0) {
              this.top1c.dcl = "0%";
            } else {
              this.top1c.dcl =
                (Number(res.data[1].value / res.data[0].value) * 100).toFixed(1) +
                "%";
            }
          }
        });
      },
      //form1类型切换
      top1FormChange() {
        this.productPlanCount1();
      },
      radioChange1(event) {
        this.top1Form.pDateStart = event[0];
        this.top1Form.pDateEnd = event[1];
        this.productPlanCount1();
      },
      //来源分析
      productPlanCount2() {
        ProductPlanCount2().then((res) => {
          if (res.code == 200) {
            var obj = {
              xData: [],
              yData1: [],
              yData2: [],
              yData3: [],
              yData4: [],
              yData5: [],
              yData6: [],
            };
            for (let item of res.data) {
              obj.xData.push(item.name);
              obj.yData1.push(Number(item.value1).toFixed(2));
              obj.yData2.push(Number(item.value2).toFixed(2));
              obj.yData3.push(item.value3);
              obj.yData4.push(item.value4);
              obj.yData5.push(item.value5);
              obj.yData6.push(item.value6);
            }
            this.top2 = obj;
          }
        });
      },
      //追加分布
      productRecordDetailCount3() {
        ProductRecordDetailCount3(this.top2aForm).then((res) => {
          if (res.code == 200) {
            this.top2a = res.data;
          }
        });
      },
      //追加分布-全部
      productRecordDetailCount3All() {
        let obj = JSON.parse(JSON.stringify(this.top2aForm));
        obj.all = "111";
        ProductRecordDetailCount3(obj).then((res) => {
          if (res.code == 200) {
            this.$refs.AllDialog.dialogTableVisible = true;
            this.$refs.AllDialog.tableData.column[0].label = "名称";
            this.$refs.AllDialog.right.unit = "%";
            this.$refs.AllDialog.tableData.data = res.data;
          }
        });
      },
      radioChange2a(event) {
        this.top2aForm.pDateStart = event[0];
        this.top2aForm.pDateEnd = event[1];
        this.productRecordDetailCount3();
      },
      //分类统计
      productPlanCount3() {
        ProductPlanCount3(this.top3Form).then((res) => {
          if (res.code == 200) {
            // console.log(3, res);
            this.top3 = res.data;
          }
        });
      },
      //分类统计-全部
      productPlanCount3All() {
        let obj = JSON.parse(JSON.stringify(this.top3Form));
        obj.all = "111";
        ProductPlanCount3(obj).then((res) => {
          if (res.code == 200) {
            this.$refs.AllDialog.dialogTableVisible = true;
            this.$refs.AllDialog.tableData.data = res.data;
            this.$refs.AllDialog.unit = "";
            this.$refs.AllDialog.right.unit = "";
          }
        });
      },
      radioChange2(event) {
        this.top3Form.pDateStart = event[0];
        this.top3Form.pDateEnd = event[1];
        this.productPlanCount3();
      },
      //全部计划占比统计
      productPlanCount4() {
        ProductPlanCount4(this.center1Form).then((res) => {
          if (res.code == 200) {
            this.center1 = res.data;
          }
        });
      },
      //全部计划占比统计-全部
      productPlanCount4All() {
        let obj = JSON.parse(JSON.stringify(this.center1Form));
        obj.all = "111";
        ProductPlanCount4(obj).then((res) => {
          if (res.code == 200) {
            this.$refs.AllDialog.dialogTableVisible = true;
            this.$refs.AllDialog.right.unit = "%";
            this.$refs.AllDialog.unit = "";
            this.$refs.AllDialog.tableData.column[4].prop = "";
            this.$refs.AllDialog.tableData.data = res.data;
          }
        });
      },
      radioChange3(event) {
        this.center1Form.pDateStart = event[0];
        this.center1Form.pDateEnd = event[1];
        this.productPlanCount4();
      },
      //已完成占比统计
      productPlanCount40() {
        ProductPlanCount6(this.center2Form).then((res) => {
          if (res.code == 200) {
            this.center2 = res.data;
          }
        });
      },
      //已完成占比统计-全部
      productPlanCount40All() {
        let obj = JSON.parse(JSON.stringify(this.center2Form));
        obj.all = "111";
        ProductPlanCount6(obj).then((res) => {
          if (res.code == 200) {
            this.$refs.AllDialog.dialogTableVisible = true;
            this.$refs.AllDialog.right.unit = "标准箱";
            this.$refs.AllDialog.tableData.column[3].prop = "value2";
            this.$refs.AllDialog.tableData.data = res.data;
          }
        });
      },
      radioChange4(event) {
        this.center2Form.pDateStart = event[0];
        this.center2Form.pDateEnd = event[1];
        this.productPlanCount40();
      },
      //未完成占比统计
      productPlanCount41() {
        ProductPlanCount7(this.center3Form).then((res) => {
          if (res.code == 200) {
            this.center3 = res.data;
          }
        });
      },
      //未完成占比统计-全部
      productPlanCount41All() {
        let obj = JSON.parse(JSON.stringify(this.center3Form));
        obj.all = "111";
        ProductPlanCount7(obj).then((res) => {
          if (res.code == 200) {
            this.$refs.AllDialog.dialogTableVisible = true;
            this.$refs.AllDialog.right.unit = "标准箱";
            this.$refs.AllDialog.tableData.column[3].prop = "value2";
            this.$refs.AllDialog.tableData.data = res.data;
          }
        });
      },
      radioChange5(event) {
        this.center3Form.pDateStart = event[0];
        this.center3Form.pDateEnd = event[1];
        this.productPlanCount41();
      },
      //当年十二个月生产计划天数统计
      productPlanCount5() {
        ProductPlanCount5().then((res) => {
          var d = new Date();
          var getMonth = d.getMonth();
          if (res.code == 200) {
            let number = 0;
            this.bottom = [];
            let temp = 0;
            for (var i = 0; i < res.data.length; i++) {
              let obj = {};
              if (i <= getMonth) {
                number += Number(res.data[i].value3);
                temp++;
              }
              obj.name = res.data[i].name.split("-")[0];
              obj.value1 = res.data[i].value3;
              obj.value = res.data[i].value;
              obj.valueArr = [
                res.data[i].name + "小时",
                "生产计划:" + res.data[i].value2 + "箱",
                "实际生产:" + res.data[i].value3 + "箱",
              ];
              this.bottom.push(obj);
              // if (res.data[i].value) {
              //   temp++;
              // }
            }
            if (res.data.length != 0) {
              this.bottomLabel = number.toFixed(0);
            }
            if (number == 0) {
              this.bottomLabel = 0;
            }
          }
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .clzdjd_box {
    width: 100%;
    // height: 80%;
    height: 190px;
    position: relative;
    left: -5%;

    .clzdjd_item {
      height: 100%;
      height: 60px;

      .clzdjd_item_left {
        width: 13%;
        height: 100%;
        position: relative;

        .index {
          position: absolute;
          color: #ffffff;
          left: 0;
          right: 0;
          bottom: 0;
          top: 0;
          margin: auto;
        }

        .bigCir {
          width: 25px;
          height: 25px;
          border: 1px solid #02d5c2;
          // background: rgba(66, 169, 255, 0.3);
          border-radius: 50%;
          position: relative;
          left: -0%;

          .smallCir {
            width: 15px;
            height: 15px;
            border: 1px solid #02d5c2;
            // background: red;
            border-radius: 50%;
          }

          .border {
            width: 1px;
            height: 20px;
            background: #02d5c2;
            position: absolute;
            top: 130%;
          }
        }
      }

      .clzdjd_item_right {
        width: 80%;
        height: 75%;
        margin-left: 1%;
        max-width: 435px;
        max-height: 124px;
        background: linear-gradient(180deg,
            rgba(44, 119, 187, 0.6) 0%,
            rgba(18, 81, 141, 0.6) 100%);
        border: 1px solid rgba(52, 134, 218, 0.6);
        // background: red;
        font-size: 14px;
        color: #00ebcd;

        .lt {
          width: 62%;
          // background-color: #fff;
          // padding-left: 20px;
          text-align: left;
        }

        .rt {
          width: 28%;
          // background-color: red;
          padding-left: 0px;
          font-weight: 700;
        }
      }
    }

    .clzdjd_item:last-child .border {
      width: 0 !important;
    }
  }

  @media screen and (max-width: 1000px) {
    .clzdjd_box {
      left: -8%;
      height: 180px;

      .clzdjd_item {
        position: relative;
        left: -4%;

        .clzdjd_item_left {
          position: relative;
        }

        .clzdjd_item_right {
          margin-left: 4%;
          padding: 0px 4px;
          height: 74%;
          font-size: 13px;
          width: 100%;
          justify-content: space-between;

          .lt {
            padding: 0px;
            width: 43% !important;
          }

          .rt {
            width: 57%;
            text-align: right;
          }
        }
      }
    }

    .title_box_bc {

      // box-shadow: 0 0 3px 3px rgb(52 112 167 / 90%);
      .calculagraph_right,
      .calculagraph_left {
        width: 45%;
        height: 95%;
        // background: red;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        position: relative;
        float: left;
        margin-left: -8%;
      }

      .calculagraph_right {
        align-items: flex-start;
        justify-content: center;
        width: 55%;
        height: 95%;
        margin-left: -6%;
        position: relative;
        top: 7%;
      }

      .label {
        background: rgba(0, 0, 0, 0);
      }
    }
  }

  .productionDesign_box {
    .content {
      overflow-x: hidden;

      .content_top,
      .content_bottom,
      .content_center {
        //   background: red;
        width: 100%;
        height: 35.2%;
      }

      .content_center {
        height: 31.7%;
      }

      .content_bottom {
        height: 25.7%;
      }

      .Echarts {
        height: calc(100% - 50px);

        .jxb_right {
          width: 260px;
          // height: 150px;
          margin-left: -60px;

          // background: red;
          .left {
            display: flex;
            flex-direction: column;
            align-items: center;

            .big_cir {
              width: 18px;
              height: 18px;
              border-radius: 50%;
              border: 1px solid #086088;

              .small_cir {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                border: 2px solid #02d5c2;
              }
            }

            .big_cir_blue {
              border: 1px solid #105b95;

              .small_cir_blue {
                border: 2px solid #1c9ad5;
              }
            }

            .and {
              width: 2px;
              height: 20px;
              margin: 8px 0;
              background: -moz-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
              background: -webkit-gradient(linear,
                  left top,
                  left bottom,
                  color-stop(0%, #02d5c2),
                  color-stop(100%, #1c9ad5));
              background: -webkit-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
              background: -o-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
              background: -ms-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
              background: linear-gradient(to bottom, #02d5c2 0%, #1c9ad5 100%);
            }
          }

          .right {
            .item {
              width: 150px;
              height: 35px;
              border: 1px solid #086088;
              margin: 15px 10px;
              padding: 0 20px;

              .title,
              .number {
                font-size: 13px;
                color: #00ebcd;
              }

              .number {
                font-weight: 700;
              }
            }

            .item_blue {
              border: 1px solid #105b95;

              .title,
              .number {
                color: rgba(35, 195, 255, 1);
              }
            }
          }
        }
      }

      @media screen and (max-width: 1000px) {
        .Echarts {
          height: 100%;
        }
      }
    }
  }

  .content {
    width: 100%;
  }
</style>
<style lang="scss">
  .noBackground {
    .el-input__inner {
      background: rgba(0, 0, 0, 0) !important;
    }

    .el-input--suffix .el-input__inner {
      padding: 0;
    }

    // background: rgna(0,0,0,0);
  }
</style>
